<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <router-link to="/Settlements/FeesExpensesShow">应付费用管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>新增应付费用</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="货主单位:" prop="shipperIsUnit">
            <el-input v-model="form.shipperIsUnit" placeholder="请输入货主单位" />
        </el-form-item>
        <el-form-item label="结算方式:" style="width: 1000px;" prop="paymentMethod">
            <el-radio-group v-model="form.paymentMethod">
                <el-radio value="微信支付">微信支付</el-radio>
                <el-radio value="支付宝支付">支付宝支付</el-radio>
                <el-radio value="银联支付">银联支付</el-radio>
                <el-radio value="企业转账">企业转账</el-radio>
                <el-radio value="线下支付">线下支付</el-radio>
                <div>
                    <el-radio value="其它">其它</el-radio>
                    <el-input v-if="form.paymentMethod==='其它'" v-model="form.otherPaymentMethod" placeholder="请输入结算方式" style="width: 120px;margin-left: 30px;" />
                </div>
            </el-radio-group>
            <el-input v-model="form.paymentMethod" v-show="show1" placeholder="请输入结算方式" style="width: 120px;margin-left: 30px;" />
        </el-form-item>
        <el-form-item label="吨位(立方米):" prop="tonnage">
            <el-input v-model="form.tonnage" placeholder="请输入吨位" />
        </el-form-item>
        <el-form-item label="单价(元/立方米):" prop="costManagementPrice">
            <el-input v-model="form.costManagementPrice" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="金额:" prop="costManagementAmount">
            <el-input v-model="form.costManagementAmount" placeholder="请输入金额" />
        </el-form-item>
        <el-form-item label="业务日期:" prop="businessDate">
            <el-col :span="11">
                <el-date-picker v-model="form.businessDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择业务日期" style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item label="经办人:" prop="costManagementAttn">
            <el-input v-model="form.costManagementAttn" placeholder="请输入经办人" />
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.costManagementRemark" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button @click="router.push('FeesExpensesShow')">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const route = useRoute()
const show1 = ref(false)
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    // updatedBy: "",  // 更新人
    // updatedDate: "",     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    expensesId: 0,          // 费用ID
    companyID: "1859805972751585280",          // 公司ID
    user_Id: 0,         // 用户ID
    ticketNumber: "",        // 票号
    shipperIsUnit: "",      // 承运/货主单位
    outsourcedUnits: "",    // 外包单位
    paymentMethod: "",      // 付款方式
    otherPaymentMethod: "",    // 其他付款方式
    tonnage: '',            // 吨数
    costManagementPrice: '',    // 成本管理单价
    costManagementAmount: '',    // 成本管理金额
    businessDate: "",      // 业务日期
    costManagementAttn: "",      // 成本管理经办人
    costManagementRemark: "",    // 成本管理备注
    checkStatus: false,        // 审核状态
    // checkPeople: "",           // 审核人
    // checkDate: "",         // 审核日期
    expensesClassify: 1,      // 费用分类
})

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    shipperIsUnit: [
        { required: true, message: '货主单位不能为空', trigger: 'blur' },
    ],
    paymentMethod: [
        { required: true, message: '结算方式不能为空', trigger: 'blur' },
    ],
    tonnage: [
        { required: true, message: '吨位不能为空', trigger: 'blur' },
    ],
    costManagementPrice: [
        { required: true, message: '单价不能为空', trigger: 'blur' },
    ],
    costManagementAmount: [
        { required: true, message: '金额不能为空', trigger: 'blur' },
    ],
    businessDate: [
        { required: true, message: '业务日期不能为空', trigger: 'blur' },
    ],
    costManagementAttn: [
        { required: true, message: '经办人不能为空', trigger: 'blur' },
    ],
})
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            var date1 = new Date().toISOString().slice(0, 10).replaceAll("-", "");
            var date2 = new Date().toISOString().slice(11, 17).replaceAll(":", "");
            form.ticketNumber = "YS" + date1 + date2;
            // console.log(form);

            axios.post('/swrite/api/Expenses/Create',form)
            .then(res=>{
                if(res.data.code == 0)    {
                    ElMessage.success('添加成功');  
                    router.push('/Settlements/FeesExpensesShow')
                }
            })
            .catch(err=>{
                console.log(err);
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


onMounted(() => {

})
</script>